<template>
  <view class="my-pending-page">
    <!-- 导航栏 -->
    <up-navbar title="我待处理" :autoBack="true" :fixed="true" bgColor="transparent" :border="false" placeholder/>
    
    <!-- 菜单列表 -->
    <view class="menu-list">
      <view
        v-for="item in menuItems"
        :key="item.path"
        class="menu-item"
        @click="handleMenuClick(item)"
      >
        <image :src="item.icon" mode="aspectFit" class="menu-icon" />
        <text class="menu-name">{{ item.name }}</text>
        <image src="/static/images/right-arrow@2x.svg" mode="aspectFit" class="arrow-icon" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 菜单项数据
const menuItems = ref([
  {
    name: '我处理的订单申诉',
    icon: '/static/images/my-appeals@2x.png',
    path: '/pages/my-pending/order-appeals/index'
  },
  {
    name: '我处理的车辆认证',
    icon: '/static/images/vehicle-verify@2x.png',
    path: '/pages/my-pending/vehicle-verify/index'
  },
  {
    name: '我处理的咨询留言',
    icon: '/static/images/my-appeals@2x.png',
    path: '/pages/my-pending/message-consult/index'
  },
  {
    name: '我派发的工单',
    icon: '/static/images/work-orders@2x.png',
    path: '/pages/my-pending/work-orders/index'
  },
  {
    name: '我提交的禁用审核',
    icon: '/static/images/berth-disable@2x.png',
    path: '/pages/my-pending/berth-disable/index'
  }
])

// 处理菜单点击
const handleMenuClick = (item) => {
  console.log(item, '===================================')
  uni.navigateTo({
    url: item.path
  })
}
</script>

<style lang="scss" scoped>
.my-pending-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.menu-list {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 0 20rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f8f8f8;
  }
}

.menu-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.menu-name {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
}

.arrow-icon {
  width: 32rpx;
  height: 32rpx;
}
</style>